<template>
  <div>
    <div class="wrapper">
      <div class="overlay"></div>
      <div :class="{ rotator: isActive, rota: !isActive }">
        <div
          class="panel"
          :id="'panel' + (index + 1)"
          v-for="(item, index) in this.inituser"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <el-button type="primary" class="select luckbutton" @click="clickdraw()"
      >点击抽取</el-button
    >
  </div>
</template>
<script>
export default {
  props: ["multipleSelection"], //已选择的所有人员
  data() {
    return {
      isActive: false, //滚动动画
      inituser: [], //初始化为空
      luckperson: [], //用来存储被抽中的幸运儿的姓名
      luckpersons: "", //用来存储被抽中的两位幸运儿的姓名
    };
  },
  mounted() {
    this.init(); //初始化调用
  },
  methods: {
    init() {
      //初始化
      for (let i = 0; i < this.multipleSelection.length; i++) {
        for (let j = 0; j < 2; j++) {
          this.inituser.push(this.multipleSelection[i]);
        }
      }
    },
    Luckdraw() {
      //开始随机抽取人员
      let message = this.inituser;
      let panels = document.querySelectorAll(".panel");
      let messageIndex = Math.floor(Math.random() * message.length);
      const arr = [];
      panels[0].textContent = message[messageIndex].name;
      for (let i = 0; i < message.length; i++) {
        if (message[i].name == message[messageIndex].name) {
          console.log("重复");
        } else {
          arr.push(message[i].name);
        }
      }
      arr.push(message[messageIndex].name);
      let newarr = this.randFun(arr); //调用打乱方法
      for (let j = 1; j < message.length; j++) {
        panels[j].textContent = newarr[j];
      }
    },
    clickdraw() {
      //点击进行抽取操作
      this.$nextTick(() => {
        this.isActive = true;
        this.Luckdraw();
        let panels = document.querySelectorAll(".panel");
        let p = panels[0].textContent;
        this.luckperson.push(p);
        if (this.luckperson.length == 2) {
          this.luckpersons = this.luckperson[0] + ", " + this.luckperson[1];
          this.$http
            .post("insHistory", null, {
              params: {
                history: this.luckpersons,
              },
            })
            .then((res) => {
              console.log(res);
            });
          let persons = this.luckpersons;
          setTimeout(() => {
            this.$confirm(
              `荣获本次卫生扫除任务荣誉的两位分别是：${persons}`,
              "提示",
              {
                type: "success",
              }
            )
              .then(() => {
                console.log(1);
              })
              .catch(() => {
                console.log(2);
              });
          }, 3000);
          this.luckperson = [];
          this.luckpersons = "";
        }
        setTimeout(() => {
          this.isActive = false;
        }, 1200);
      });
    },
    randFun(arr) {
      //打乱数组
      for (let i = 0, len = arr.length; i < len; i++) {
        let index = parseInt(Math.random() * (len - 1));
        let tempValue = arr[i];
        arr[i] = arr[index];
        arr[index] = tempValue;
      }
      return arr;
    },
  },
};
</script>
<style>
*:before,
*:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wrapper {
  width: 130px;
  height: 65px;
  justify-content: center;
  perspective: 20000px;
  /* animation: fadeIn 3s linear, fadeOut 1s 8s; */
  opacity: 1;
}
.wrapper:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  z-index: 1;
  height: 0;
  width: 0;
  border: solid transparent;
  margin-top: -6px;
  border-width: 6px;
  border-color: rgba(0, 0, 0, 0);
  border-left-color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.15));
}
.wrapper:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 65px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.15));
  animation: glow 1s 3s ease-in-out;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    top: -100px;
  }
  25% {
    opacity: 1;
    top: 0;
  }
  80% {
    top: 0px;
  }
  98% {
    top: 40px;
  }
  100% {
    top: 0px;
  }
}
@keyframes glow {
  10% {
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.3);
  }
  30% {
    box-shadow: 0 0 60px 5px #ffffff;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
    top: 0;
  }
  100% {
    opacity: 0;
    top: -70px;
  }
}
.overlay {
  position: absolute;
  top: 32px;
  left: 0px;
  z-index: 2;
  width: 130px;
  height: 252px;
  background: linear-gradient(
    #000000,
    rgba(0, 0, 0, 0) 45.88%,
    rgba(0, 0, 0, 0) 54.56%,
    #000000
  );
  opacity: 0.7;
  box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.3);
  transform: translateY(-50%);
  pointer-events: none;
}
.rotator {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: spin 3s cubic-bezier(0, 0, 0, 1.1);
}
.rota {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(360deg);
}
@keyframes spin {
  0% {
    transform: rotateX(0deg);
  }
  98% {
    transform: rotateX(-3960deg);
  }
  100% {
    transform: rotateX(-3960deg);
  }
}
.panel {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 65px;
  margin-bottom: 10px;
  padding: 5px;
  background-color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
  color: #fff;
}
#panel1 {
  background-color: #8258ed;
  transform: rotateX(0deg) translateZ(121.29165125px);
}
#panel2 {
  background-color: #cc58ed;
  transform: rotateX(30deg) translateZ(121.29165125px);
}
#panel3 {
  background-color: #ed58c3;
  transform: rotateX(60deg) translateZ(121.29165125px);
}
#panel4 {
  background-color: #ed5879;
  transform: rotateX(90deg) translateZ(121.29165125px);
}
#panel5 {
  background-color: #ed8258;
  transform: rotateX(120deg) translateZ(121.29165125px);
}
#panel6 {
  background-color: #edcc58;
  transform: rotateX(150deg) translateZ(121.29165125px);
}
#panel7 {
  background-color: #c3ed58;
  transform: rotateX(180deg) translateZ(121.29165125px);
}
#panel8 {
  background-color: #79ed58;
  transform: rotateX(210deg) translateZ(121.29165125px);
}
#panel9 {
  background-color: #58ed82;
  transform: rotateX(240deg) translateZ(121.29165125px);
}
#panel10 {
  background-color: #58edcc;
  transform: rotateX(270deg) translateZ(121.29165125px);
}
#panel11 {
  background-color: #58c3ed;
  transform: rotateX(300deg) translateZ(121.29165125px);
}
#panel12 {
  background-color: #5879ed;
  transform: rotateX(330deg) translateZ(121.29165125px);
}
.alert-info {
  position: relative;
  min-width: 130px;
  top: 120px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  animation: textFade 3s;
}
@keyframes textFade {
  0% {
    top: 100px;
    opacity: 0;
  }
  82% {
    top: 100px;
    opacity: 0;
  }
  100% {
    top: 120px;
    opacity: 1;
  }
}
.money {
  font-size: 16px;
  font-weight: 500;
}
.select {
  border-radius: 8px !important;
}
.luckbutton {
  position: absolute !important;
  z-index: 999 !important;
  margin-top: 9.6% !important;
  margin-left: -10% !important;
}
</style>